<template>
  <div class="topic">
    <!-- 搜索 -->
    <el-form
      :inline="true"
      :model="pageInfo"
      class="demo-form-inline"
      ref="queryForm"
      label-width="80px"
      size="small"
    >
      <!-- <el-form-item label="工号">
        <el-input
          v-model="pageInfo.deviceName"
          placeholder="请输入工号"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="姓名">
        <el-input
          v-model="pageInfo.manufacturerName"
          placeholder="请输入姓名"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input
          v-model="pageInfo.imei"
          placeholder="请输入身份证号"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <!-- <el-button size="small" type="success" icon="el-icon-plus" @click="add"
      >添加</el-button
    > -->
    <el-button size="small" @click="batchRemove()">批量删除</el-button>
    <!-- <el-button size="small" type="warning" icon="el-icon-ship" @click="print"
      >打印</el-button
    > -->
    <!-- <el-button
      type="warning"
      plain
      icon="el-icon-download"
      size="mini"
      style="float: right; margin-right: 15px"
      @click="exportExcel"
      >导出设备</el-button
    > -->
    <!-- @click="$router.push({ path: '/import', query: { type: 'employees' } })" -->
    <!-- <el-button
      type="success"
      plain
      icon="el-icon-upload2"
      size="mini"
      style="float: right"
      >导入设备</el-button
    > -->
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        size="mini"
        stripe
        height="90%"
        style="margin-top: 30px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1 }}
            --
            {{ scope.$index }}
          </template>
        </el-table-column>

        <el-table-column prop="data" align="center" label="题型" width="110">
        </el-table-column>

        <el-table-column prop="data" align="center" label="题干" fit>
        </el-table-column>

        <el-table-column prop="data" align="center" label="答案" width="110">
        </el-table-column>

        <el-table-column prop="data" align="center" label="分数" width="110">
        </el-table-column>

        <el-table-column prop="data" align="center" label="难度" width="110">
        </el-table-column>

        <el-table-column
          prop="data"
          align="center"
          label="创建时间"
          width="150"
        >
        </el-table-column>

        <el-table-column label="操作" width="80" align="center" fixed="right">
          <template v-slot="{ row }">
            <!-- <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(row.id)"
              title="修改"
            /> -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeDataById(row.id)"
              title="删除"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页查询 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNo"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
    <!-- 添加，修改窗口 -->
    <el-dialog
      :title="form.id ? '修改设备' : '添加设备'"
      @close="close"
      :visible.sync="showDialog"
      width="30%"
      top="2vh"
    >
      <el-form
        :rules="rules"
        ref="form"
        :model="form"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="工号" prop="deviceName">
          <el-input
            placeholder="请输入工号"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            placeholder="请输入姓名"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input
            placeholder="请选择性别"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="国籍">
          <el-input
            placeholder="请选择国籍"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input
            placeholder="请输入民族"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input
            placeholder="请选择出生日期"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input
            placeholder="请输入家庭住址"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-input
            placeholder="请选择证件类型"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            placeholder="请输入证件号码"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工类型">
          <el-input
            placeholder="请选择员工类型"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input
            placeholder="请选择学历"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
        {
          data: "秦学海",
        },
      ],
      // 表格复选数组
      selectValue: [],
      // 分页查询
      pageInfo: {
        // 总条数
        total: 0,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 15,
      },
      // 添加修改开关
      showDialog: false,
      // 表单数据
      form: {
        deviceName: "太和广业",
      },
      // 表单验证
      rules: {},
    };
  },
  created() {
    // 查询表格数据
  },
  methods: {
    // 表格数据
    tableDatalist() {},
    //复选框发生变化执行方法
    handleSelectionChange(selection) {
      this.selectValue = selection;
      //console.log(this.selectValue)
    },
    // 搜索
    async handleQuery() {
      this.pageInfo.pageNo = 1;
      await this.loadData();
      await this.$message.success("搜索成功");
    },
    // 重置
    resetQuery() {
      this.pageInfo.pageNo = 1;
      //   this.loadData();
      this.$message.success("数据重置成功");
    },
    // 分页 左右 点击 输入
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      // this.loadData();
    },
    // 分页多少条点击事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNo = val;
      // this.loadData();
    },
    // 导出
    exportExcel() {},
    // 打印
    print() {},
    // 添加
    add() {
      // 打开表单
      this.showDialog = true;
    },
    // 删除
    edit(id) {
      console.log("删除单挑数据id", id);
      this.$confirm("确定删除这条数据", "删除")
        .then(async () => {
          //   const res = await eqdelete(id);
          //   this.$message.success(res.message);
          //   if (this.tableData.length == 1 && this.pageInfo.pageNo != 1) {
          //     this.pageInfo.pageNo--;
          //   }
          //   this.loadData();
        })
        .catch(() => {});
    },
    // 批量删除
    batchRemove() {
      // 判断是否选中
      if (this.selectValue.length == 0) {
        this.$message.warning("请选择要删除的记录！");
        return;
      }
      // 删除操作
      this.$confirm("确定删除这条数据", "删除")
        .then(() => {
          //数组
          var idList = [];
          // 获取需要删除的数组id
          for (var i = 0; i <= this.selectValue.length; i++) {
            var obj = this.selectValue[i];
            //id值
            var id = obj.id;
            //放到数组里面
            idList.push(id);
          }
          // 发请求删除数据
          // 提示信息
          this.$message.success("删除成功");
          // 刷新数据
        })
        .catch(() => {});
    },
    // 查看单挑数据
    edit(id) {
      console.log("单挑数据id", id);
    },
    // 取消
    close() {
      this.form = {};
      this.showDialog = false;
    },
    // 确定
    save() {
      this.$refs.form.validate((v) => {
        if (v) {
          // console.log('添加表单数据', this.form)
          // 修改数据
          if (this.form.id) {
            // res = await eqmodificationupdate(this.form)
          } else {
            // 添加数据
            // res = await eqaddcreate(this.form)
            this.pageInfo.total++;
            // this.pageInfo.pageNo = Math.ceil(
            //   this.pageInfo.total / this.pageInfo.pageSize
            // );
          }
          this.pageInfo.pageNo = 1;
          //   this.loadData()
          //   this.$message.success(res.message)
          this.close();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.topic {
  width: 920px;
  //   background-color: skyblue;
  .demo-form-inline {
    margin-top: 5px;
    margin-left: -40px;
  }
  .table {
    width: 100%;
    height: 595px;
  }
  .pagination {
    // background-color: skyblue;
    position: fixed;
    bottom: 70px;
    right: 120px;
  }
}
</style>
